<template>
  <div>
    <DynamicTable row-key="id" header-title="我的事件" title-tooltip="分派给我的事件"
                  :data-request="Api.eventListServe.getMyEventList" :columns="columns" bordered size="small">
    </DynamicTable>
  </div>
</template>
<script setup lang="ts">
import {
  baseColumns,
  type TableListItem,
  type TableColumnItem,
} from "./columns";
import {
  eventSchemas,
  eventSchemasHandlerFenpai,
  eventSchemasHandlerBanjie,
  eventSchemasHandlerBohui
} from "./fromSchemas";
import {useTable} from "@/components/core/dynamic-table";
import {useFormModal} from "@/hooks/useModal/";
import {getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance()

import Api from "@/api/";
import {TypeStatus} from '@/views/dealevent/eventUtils'

defineOptions({
  name: "wodeshijian",
});


const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal();

const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: "操作",
    width: 200,
    dataIndex: "ACTION",
    hideInSearch: true,
    fixed: "right",
    actions: ({record}) => {
      let action = [
        // {
        //   label: "分派",
        //   icon: 'ant-design:edit-outlined',
        //   auth: {
        //       perm: 'dealevent:wodeshijian:zhuanpai',
        //     effect: 'disable',
        //   },
        //   onClick: () => {
        //     openEventHandlerFenpai(record);
        //   },
        //   // disabled: (record.eventStatus  == 2)
        // },
        {
          label: "办结",
          icon: 'ant-design:edit-outlined',
          auth: {
            perm: 'dealevent:wodeshijian:banjie',
            effect: 'disable',
          },
          onClick: () => {
            openEventHandlerBanjie(record);
          },
          disabled: (record.eventStatus == TypeStatus.completed
              || record.eventStatus == TypeStatus.rejected)
        },
        {
          label: "驳回",
          icon: 'ant-design:edit-outlined',
          auth: {
            perm: 'dealevent:wodeshijian:bohui',
            effect: 'disable',
          },
          onClick: () => {
            openEventHandlerBohui(record);
          },
          disabled: (record.eventStatus == TypeStatus.completed
              || record.eventStatus == TypeStatus.rejected)
        },
        {
          label: "查看",
          icon: 'ant-design:align-center-outlined',
          auth: {
            perm: 'dealevent:wodeshijian:chakan',
            effect: 'disable',
          },
          onClick: () => {
            openMenuModal(record);
          }
        }
      ];
      // if (proxy.$isMobile) {
      //   // 删除掉数组最后一个
      //   action.pop();
      // }
      return action
    }
  },
];


const openEventHandlerBohui = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `驳回`,
      width: "100%",
      wrapClassName: "full-modal",
      onFinish: async (values) => {
        let newVar = await Api.eventListServe.updateEvent(values);
        dynamicTableInstance?.reload();
      },

    },
    formProps: {
      labelWidth: 100,
      schemas: eventSchemasHandlerBohui(),
    },
  });
  formRef?.setFieldsValue({
    ...record,
  });
};

const openMenuModal = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `查看`,
      width: "100%",
      wrapClassName: "full-modal",
      onFinish: async (values) => {
        console.log(values);
        dynamicTableInstance?.reload();
      },
    },
    formProps: {
      labelWidth: 100,
      schemas: eventSchemas(),
    },
  });

  formRef?.setFieldsValue({
    ...record,
  });

  let strings = String(record.imageIds).split(",");
  for (let i = 0; i < strings.length; i++) {
    if (strings[i] != null) {
      formRef?.appendSchemaByField({
        field: 'imageIds',
        component: 'Image',
        dynamicDisabled: true,
        colProps: {
          span: 6,
        },
        componentProps: {
          src: import.meta.env.VITE_DOWNLOAD_PATH + strings[i],
          height: proxy.$isMobile ? 100 : 300,
        },
      })
    }
  }
};

const openEventHandlerFenpai = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `分派`,
      width: "100%",
      wrapClassName: "full-modal",
      onFinish: async (values) => {
        console.log(values);
        let newVar = await Api.eventListServe.updateEvent(values);
        console.log(newVar)
        dynamicTableInstance?.reload();
      },
    },
    formProps: {
      labelWidth: 100,
      schemas: eventSchemasHandlerFenpai(),
    },
  });
  formRef?.setFieldsValue({
    ...record,
  });
  let eventUser = await Api.eventListServe.getEventUser(record);
  formRef?.updateSchema([
    {
      field: 'distractorToWpsUserId',
      componentProps: {
        placeholder: "选择人员",
        showSearch: true,
        options: eventUser,
        fieldNames: {
          label: 'name',
          value: 'company_uid',
        },
      },
    }
  ]);
}

const openEventHandlerBanjie = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `办结`,
      width: "100%",
      wrapClassName: "full-modal",
      onFinish: async (values) => {
        let newVar = await Api.eventListServe.updateEvent(values);
        dynamicTableInstance?.reload();
      },

    },
    formProps: {
      labelWidth: 100,
      schemas: eventSchemasHandlerBanjie(),
    },
  });
  formRef?.setFieldsValue({
    ...record,
  });

};

</script>
<style lang="less">
.full-modal {
  .ant-modal {
    height: calc(100vh);
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    //height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>